<template>
    <view class="content">
        <van-nav-bar :title="scrolling? navBarTitle : '' " left-arrow @click-left="onClickLeft"> </van-nav-bar>

        <scroll-view class="scroll-content" scroll-y :lower-threshold="80" @scroll="scrollPage"  show-scrollbar="false">

            <view class="tabTop">
                <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/bookedSuccessPic.png" alt="" style="width: 92px; height: 86px;">
            </view>
            <view class="moneyBg">
                <view class="text">预约成功</view>
            </view>
            <!-- 预约信息 -->
            <view class="bookedInfo">
                <view class="serviceInfoLabel">服务时间： <span>{{ bookedDateInfo}}</span></view>
                <view class="serviceInfoLabel">联系电话： <span>{{userInfo.phone}}</span></view>
                <view class="serviceInfoLabel">预约地址： <span>{{bookedAddress}}</span></view>
            </view>

            <view class="btnArea">
                <button style="margin: 30px 0" plain  class="checkBtn" @click="lookMyBookedService">查看预约</button>
            </view>
            <!-- 彩色的线 -->
            <view class="clearfix">
                <img
                    src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/colorLine.png"
                    alt=""
                    style=" display:block; width: 100%; height:3px;" />
            </view>
            <!-- 页面底部内容  你可能还会喜欢 -->
            <view class="maybeYouLike">
                <view class="content_title">你可能还会喜欢</view>
                <view class="goodsListBox">
                    <view
                        class="joinGoodsList"
                        v-for="(itemL, indexL) in joinGoodsList"
                        :id="indexL"
                        :key="indexL"
                        @click="toGoodsDetail(itemL, indexL)">
                        <view class="joinGoods_img">
                            <img :src="itemL.imgurl" alt="" mode="widthFix">
                        </view>
                        <view class="joinGoods_detail pl15">{{ itemL.detail }}</view>
                        <view class="joinGoods_title pl15">{{ itemL.title }}</view>
                        <view class="joinGoods_price pl15">{{ itemL.price }}</view>
                    </view>
                </view>
            </view>
        </scroll-view>
        <van-toast id="van-toast" />
    </view>
</template>

<script>
import Toast from '@/wxcomponents/vant/toast/toast'

export default {
    data () {
        return {
            navBarTitle: '收银台',
            scrolling: false,
            score: '1520',
            money: '262',
            joinGoodsList: [ // 热卖商品

                {
                    imgurl: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/clothes.png',
                    detail: '水润保湿面膜 澎湃水动力',
                    title: '黄芪杞姜枣糕',
                    price: '¥169'
                },
                {
                    imgurl: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/luying.png',
                    detail: '美味好物限时抢购送好礼',
                    title: '黄芪杞姜枣糕',
                    price: '¥169'
                },
                {
                    imgurl: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/coffee.png',
                    detail: '美味好物限时抢购送好礼',
                    title: '黄芪杞姜枣糕',
                    price: '¥169'
                },
                {
                    imgurl: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/dangao.png',
                    detail: '美味好物限时抢购送好礼',
                    title: '黄芪杞姜枣糕',
                    price: '¥169'
                }
            ],
            params: undefined, // 接受从路由传过来的参数
            bookedDateInfo:null, //预约时间信息
            userInfo:{}, //预约的用户信息
            bookedAddress:null, //预约的地址信息
            reservationId:undefined,
        }
    },
    onLoad (data) {
        if (data && data.params) {
            this.params=JSON.parse(decodeURIComponent(data.params))
            console.log(this.params,'params')
            this.bookedDateInfo = this.params.bookedDateInfo
            this.userInfo = this.params.userInfo
            this.bookedAddress = this.params.bookedAddress
            this.reservationId=this.params.reservationId
        }
    },
    onReady () {

    },
    methods: {
        // 滑动
        scrollPage (e) {
            console.log(e.detail.scrollTop, this.scrolling)
            if (e.detail.scrollTop > 25 && !this.scrolling) {
                this.scrolling = true
            } else if ((e.detail.scrollTop <= 25 && this.scrolling) || (e.detail.scrollTop <= 25 && !this.scrolling)) {
                this.scrolling = false
            }
        },
        // 返回键
        onClickLeft () {
            // uni.navigateBack()
            uni.redirectTo({
                url: '/pages/myService/myService'
            })
        },

        // 继续逛逛
        lookAroundBtn () {
            const params = {}
            params.biaoshi = 'pay'
            // uni.navigateTo({
            //     url:'/pages/surprise/index?params=' +
            //     encodeURIComponent(JSON.stringify(params))
            // })
            wx.switchTab({ url: '/pages/surprise/index' })
        },
        // 查看预约信息
        lookMyBookedService () {
            const params = {
                reservationId:this.reservationId
            }
            params.actStatus=1
            params.isPay = true
            
            uni.navigateTo({
                url: '/pages/myService/otherStatusService?params=' +
                    encodeURIComponent(JSON.stringify(params))
            })
        }

    }
}
</script>

<style scoped>
.content {
    background-color: #ffffff;
    display: flex;
    flex-direction:column;
    height:100vh;
    overflow:hidden;
    box-sizing: border-box;
}
.scroll-content {
    flex: 1;
    height: 1px;
}
.tabTop{
    padding:24px;
    text-align: center;
}
.title{
    font-size: 30px;
    text-align: left;
    color: #111111;
}
.moneyBg{
    margin-top: 34rpx;
    margin-left: 48rpx;
    margin-right: 48rpx;
    text-align: center;
}
.text{
    font-size: 60rpx;
    text-align: center;
    color: #111111;
    line-height: 60rpx;
}
.money{
    font-size: 14px;
    color: #111111;
    text-align: center;
    line-height: 14px;
    margin-top:20px;
}
.bookedInfo{
    margin-top:42rpx;
    padding:0rpx 48rpx;
}
.serviceInfoContent{
    margin-top: 52rpx;
    padding-bottom: 49rpx;

}
.serviceInfoLabel{
    display:flex;
    align-item:center;
    font-size: 24rpx;
    line-height: 24rpx;
    text-align: left;
    color: #888888;
    margin-bottom: 30rpx;
}
.serviceInfoLabel  span{
    font-size: 24rpx;
    line-height: 24rpx;
    text-align: left;
    color: #111111;
}
.content_title{
    font-size:20px;
    text-align: left;
    color: #111111;
    line-height: 20px;
}
.content_select{
    margin-top: 24px;
}
.num{
    border: 1px solid #333333;
    font-size: 12px;
    text-align: center;
    color: #111111;
    line-height: 12px;
    padding: 10px 0px;
    margin-top: 24px;
    width: 96px;

}
.payItem{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 27px;
}
.payItem:last-child{
    margin-bottom: 0px;
}

.payItemLeft{
    display: flex;
    align-items: center;
}
.name{
    font-size: 13px;
    color: #111111;
    line-height: 13px;
    margin-left: 11px;
}
.walletBalance{
    font-size: 11px;
    color: #666666;
    line-height: 11px;
    margin-left: 7px;
}

.btnArea{
    padding: 126rpx 48rpx 40rpx 48rpx  ;
    /* width: calc(100% - 40rpx); */
    /* height: 50px; */
    display: flex;
    /* background: palegoldenrod; */
    z-index: 100;
    justify-content: space-around;
}

.button{
    background-color: #Ffffff;
    border-radius: 38px;
    font-size:14px;
    text-align: center;
    color: #111111;
    height:76rpx;
    line-height: 76rpx;
    border: 1px solid #D4D4D4 !important;
    /* padding-left: 35px;
    padding-right: 35px; */
    width:100%;
}
.checkBtn{
    background-color: #FF6203;
    border: none;
    border-radius: 38px;
    font-size:14px;
    text-align: center;
    color: #FFFFFF;
    height:76rpx;
    line-height: 76rpx;
    /* padding-left: 35px;
    padding-right: 35px; */
    width:100%;
}
button{
    border: none;
}
button[plain]{
    border:none;
}
.maybeYouLike{
    padding: 24px;
}

/* 标题 */
.content_title{
    font-size:19px;
    text-align: left;
    color: #111111;
    line-height:19px;
}
/* 商品盒子 */
.goodsListBox{
    margin-top: 24px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.joinGoods_img {
    position: relative;
}
.joinGoods_img img {
    width: 100%;
}
.joinGoodsList {
    width: 46%;
    margin-bottom: 20px;
    box-shadow: 2px 2px 5px 0 rgb(231, 231, 231, 0.29);
    margin-right: 15px;
    background: #ffffff;
}

.joinGoodsList:nth-child(2n) {
    margin-right: 0;
}
.status_tips {
    position: absolute;
    height: 54px;
    width: 100%;
    background: rgb(240, 240, 240, 0.66);
    align-items: center;
    text-align: center;
    line-height: 54px;
    font-size: 14px;
    text-align: center;
    color: #666666;
    bottom: 5px;
}

.joinGoods_detail {

    max-width: 100%;
    white-space: nowrap;
    /* 防止文本换行 */
    overflow: hidden;
    /* 超出部分隐藏 */
    text-overflow: ellipsis;

    font-size: 10px;
    line-height: 10px;
    text-align: left;
    color: #666666;
    margin-top: 14px;
    margin-left: 14px;
}

.joinGoods_title {

    max-width: 100%;
    white-space: nowrap;
    /* 防止文本换行 */
    overflow: hidden;
    /* 超出部分隐藏 */
    text-overflow: ellipsis;
    /* 显示省略号 */

    font-size: 14px;
    line-height: 14px;
    text-align: left;
    color: #111111;
    margin-top: 11px;
    margin-left: 14px;
}

.joinGoods_price {

    font-weight: bolder;
    line-height: 16px;
    font-size: 16px;
    text-align: left;
    color: #111111;
    margin-top: 11px;
    margin-bottom: 13px;
    margin-left: 14px;
}

::v-deep .van-nav-bar__left {
    width: 56px;
    height: 44px;
}

::v-deep .van-icon {
    color: #242629 !important;
}
::v-deep .van-cell{
    padding-left: 0px !important;
    border-bottom: 1px solid #f9f9f9;
}
/* ::v-deep .van-switch{
    height: 18px !important;
    width: 36px !important;
    line-height: 18px !important;
    background-color: #C6C6C6 !important;
}
::v-deep .van-switch__node{
    height: 16px !important;
    line-height: 16px !important;
    width: 16px !important;
} */
</style>
